單一檔

在昨天，我們透過 Vue-cli 建立了一份新專案，其中若有仔細去看 main.js 會發現我們將一個 app.vue 檔給引用近來當作我們渲染的樣板入口，經過前幾天的介紹，我們可以知道 render 函式是會吃一個樣板元件進來，透過此說明我們可以了解 app.vue 的用途基本上就是建立一個樣板，還記得 render 函式吃的內容嗎

{
    template: ``,
    data(){
    },
    style: {
    }
}

那我們在 .vue 檔案的寫法也類似，大致上可以分為這樣

<template>
    <div></div>
</template>
<script>
export default {
    data(){
    },
}
</script>
<style></style>

透過 Vue-cli 的編譯，我們可以將樣板透過比較好看的方式建立，並且透過 import 以及 export 的方法將此元件直接在其他地方利用

env 檔

在 Vue-cli 的環境中，我們可以透過建立 .env 檔案來影響最終編譯後的內容，其中最常用的大概就是 API 入口以及網頁路由了，這邊讓我們來介紹一下一個簡單的 .env 檔案
.env

NODE_ENV=production
VUE_APP_API_ROOT=/api/v1
VUE_APP_SMARTPARK_ROOT = /

在 Vue-cli 中，預設情況是若透過 serve 建立環境，則是 development 開發者模式，檔案不會 mixin，vue-tools 可以偵測內容，那若是 build 打包，則是為 production 產品模式，會將內容縮減成最簡，節省空間
我們也可以透過建立 .env 檔案更改模式，其中 NODE_ENV 參數可以是 development / production，而其他參數若是要在檔案內使用則是需要以 VUE_APP 開頭，並且在其他檔案內這樣引用

process.env.VUE_APP_API_ROOT

即可呼叫相對應的 env 值
那今天我們若是有 .env 以及 .env.development 兩個環境，當我們在 build 檔前需要去 package.json 進行區分

scripts: {
    "build": "vue-cli-service build",
    "build:dev": "build": "vue-cli-service build --mode development"
}

透過這兩段 script 我們就可以告訴 vue-cli 該吃哪個環境進行編譯囉
明天將會介紹 Vue Component 的內容，希望一天能講完，讓我們明天見吧